﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>FooTable - jQuery plugin for responsive HTML tables</title>
  <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
  
  <link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
  <link href="css/footable.sortable-0.1.css" rel="stylesheet" type="text/css" />
  <link href="bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
  <link href="bootstrap/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  
  <style type="text/css">
	body { margin:30px; }
  </style>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <script src="js/footable.js" type="text/javascript"></script>
  <script src="js/footable.sortable.js" type="text/javascript"></script>
  <script src="bootstrap/bootstrap-tab.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    $(function() {
		$('table').footable();
	  
		$('#myTab a').click(function (e) {
			e.preventDefault();
			$(this).tab('show');
		}).on('shown', function (e) {	
			$('.tab-pane.active table').trigger('footable_resize');
		});
    });
  </script>
</head>
  <body>
	<ul class="nav nav-tabs" id="myTab">
		<li class="active"><a href="#table1">Leads</a></li>
		<li><a href="#table2">Contacts</a></li>
		<li><a href="#table3">Messages</a></li>
		<li><a href="#table4">Settings</a></li>
	</ul>

	<div class="tab-content">
		<div class="tab-pane active" id="table1">  
		
			<table class="footable">
			  <thead>
				<tr>
				  <th data-class="expand" data-sort-initial="true">
					<span title="table sorted by this column on load">First Name</span>
				  </th>
				  <th>
					<span title="sorting disabled on this column">Last Name</span>
				  </th>
				  <th data-hide="phone,tablet">
					Job Title
				  </th>
				  <th data-hide="phone,tablet" data-type="numeric">
					DOB
				  </th>
				  <th data-hide="phone" data-type="numeric">
					Status
				  </th>
				</tr>
			  </thead>
				<tbody>
					<tr><td>Isidra</td><td><a target="_blank" href="http://www.google.com">Boudreaux</a></td><td>Traffic Court Referee</td><td data-value="78025368997">22 Jun 1972</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
					<tr><td>Maria</td><td>Nicley</td><td>Meat Packager</td><td data-value="-100297281571">28 Oct 1966</td><td data-value="1"><img title="active" src="images/active.png" /></td></tr>
					<tr><td>Shona</td><td>Woldt</td><td><a target="_blank" href="http://www.google.com">Airline Transport Pilot</a></td><td data-value="370961043292">3 Oct 1981</td><td data-value="2"><img title="disabled" src="images/disabled.png" /></td></tr>
					<tr><td>Granville</td><td>Leonardo</td><td>Business Services Sales Representative</td><td data-value="-22133780420">19 Apr 1969</td><td data-value="1"><img title="active" src="images/active.png" /></td></tr>
					<tr><td>Easer</td><td>Dragoo</td><td>Drywall Stripper</td><td data-value="250833505574">13 Dec 1977</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
					<tr><td>Maple</td><td>Halladay</td><td>Aviation Tactical Readiness Officer</td><td data-value="694116650726">30 Dec 1991</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
			  </tbody>	  
			</table>
		
		</div>
		
		<div class="tab-pane" id="table2">  
		
			<table class="footable">
			  <thead>
				<tr>
				  <th data-class="expand" data-sort-initial="true">
					<span title="table sorted by this column on load">First Name</span>
				  </th>
				  <th>
					<span title="sorting disabled on this column">Last Name</span>
				  </th>
				  <th data-hide="phone,tablet">
					Job Title
				  </th>
				  <th data-hide="phone,tablet" data-type="numeric">
					DOB
				  </th>
				  <th data-hide="phone" data-type="numeric">
					Status
				  </th>
				</tr>
			  </thead>
				<tbody>
					<tr><td>Maxine</td><td>Woldt</td><td>Business Services Sales Representative</td><td data-value="561440464855">17 Oct 1987</td><td data-value="2"><img title="disabled" src="images/disabled.png" /></td></tr>
					<tr><td>Lorraine</td><td>Mcgaughy</td><td>Hemodialysis Technician</td><td data-value="437400551390">11 Nov 1983</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
					<tr><td>Lizzee</td><td><a target="_blank" href="http://www.google.com">Goodlow</a></td><td>Technical Services Librarian</td><td data-value="-257733999319">1 Nov 1961</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
					<tr><td>Judi</td><td>Badgett</td><td>Electrical Lineworker</td><td data-value="362134712000">23 Jun 1981</td><td data-value="1"><a target="_blank" href="http://www.google.com"><img title="active" src="images/active.png" /></a></td></tr>
					<tr><td>Rivka</td><td>Bittinger</td><td>Broadcast Maintenance Engineer</td><td data-value="751149063430">20 Oct 1993</td><td data-value="2"><img title="disabled" src="images/disabled.png" /></td></tr>
			  </tbody>	  
			</table>
		
		</div>

		<div class="tab-pane" id="table3">  
		
			<table class="footable">
			  <thead>
				<tr>
				  <th data-class="expand" data-sort-initial="true">
					<span title="table sorted by this column on load">First Name</span>
				  </th>
				  <th>
					<span title="sorting disabled on this column">Last Name</span>
				  </th>
				  <th data-hide="phone,tablet">
					Job Title
				  </th>
				  <th data-hide="phone,tablet" data-type="numeric">
					DOB
				  </th>
				  <th data-hide="phone" data-type="numeric">
					Status
				  </th>
				</tr>
			  </thead>
				<tbody>
					<tr><td>Isidra</td><td>Furniss</td><td>Jig Bore Tool Maker</td><td data-value="550552096836">13 Jun 1987</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
					<tr><td>Lauri</td><td>Hyland</td><td>Blackjack Supervisor</td><td data-value="500874333932">15 Nov 1985</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
					<tr><td>Consuelo</td><td>Robare</td><td>Internal Medicine Nurse Practitioner</td><td data-value="130022316732">13 Feb 1974</td><td data-value="2"><img title="disabled" src="images/disabled.png" /></td></tr>
					<tr><td>Claudine</td><td>Hogle</td><td>Potato Sorter</td><td data-value="-191925229848">2 Dec 1963</td><td data-value="2"><img title="disabled" src="images/disabled.png" /></td></tr>
			  </tbody>	  
			</table>
		
		</div>

		<div class="tab-pane" id="table4">  
		
			<table class="footable">
			  <thead>
				<tr>
				  <th data-class="expand" data-sort-initial="true">
					<span title="table sorted by this column on load">First Name</span>
				  </th>
				  <th>
					<span title="sorting disabled on this column">Last Name</span>
				  </th>
				  <th data-hide="phone,tablet">
					Job Title
				  </th>
				  <th data-hide="phone,tablet" data-type="numeric">
					DOB
				  </th>
				  <th data-hide="phone" data-type="numeric">
					Status
				  </th>
				</tr>
			  </thead>
				<tbody>
					<tr><td>Ilona</td><td>Mcgaughy</td><td>Cloak Room Attendant</td><td data-value="638227930531">23 Mar 1990</td><td data-value="2"><img title="disabled" src="images/disabled.png" /></td></tr>
					<tr><td>Jesusa</td><td>Shumpert</td><td>Internal Medicine Nurse Practitioner</td><td data-value="-224275853603">23 Nov 1962</td><td data-value="3"><img title="suspended" src="images/suspended.png" /></td></tr>
					<tr><td>Claudine</td><td>Pennock</td><td>Electrical Lineworker</td><td data-value="41757078895">29 Apr 1971</td><td data-value="1"><img title="active" src="images/active.png" /></td></tr>
					<tr><td>Carie</td><td>Branco</td><td>Fashion Designer</td><td data-value="300894955786">15 Jul 1979</td><td data-value="1"><img title="active" src="images/active.png" /></td></tr>
					<tr><td>Jason</td><td>Mcfetridge</td><td>Staff Electronic Warfare Officer</td><td data-value="361093678671">11 Jun 1981</td><td data-value="2"><img title="disabled" src="images/disabled.png" /></td></tr>
			  </tbody>	  
			</table>
		
		</div>		
	</div>
  
  
  
    
  </body>
</html>
